<template>
		<view class="uni-form-item uni-column box-export" :style="{display:show ? 'block' : 'none'}">
			<view class="title">
				选择表单字段
				<view class="export-btn-group">
					<button class="btn-export" @tap="exportFile">导出</button>
					<button class="btn-export" @tap="handleClose">关闭</button>
				</view>
				
			</view>
			<checkbox-group name="loves" @change="handleChange" class="checkbox">
				<label v-for="item,index in fieldsData" :key="index" class="checkbox-label">
					<checkbox :value="item.dataKey" :checked="item.checked"/><text>{{item.name}}</text>
				</label>
			</checkbox-group>
	</view>
</template>

<script>
	export default {
		
		name:"mix-export",
		data() {
			return {
				fieldsData:{},
				exportField:[]
			};
		},
		props:{
			selectIds:{
				type:String,
				default:''
			},
			queryString:{
				type:String,
				default:''
			},
			show:{
				type:Boolean,
				default:false
			},
			type:{
				type:String,
				default:'proj_excel'
			}
		},
		methods:{
			async getFields(){
				const res = await this.$req({
					url: 'system/exportManage/loadExportFields.do',
					data: {
						formDefine: this.type
					}
				})
				const data = [...res.data.attributes.exportFields[0].secondLevels];
				const arr = []
				data.forEach(item=>{
					if(item.colCode){
						arr.push({
							colCode:item.colCode,
							dataKey:item.dataKey,
							name:item.name,
							checked:item.checked
						})
						if(item.checked == 1){
							this.exportField.push(item.dataKey)
						}
					}
				})
				console.log('this.exportField',this.exportField)
				this.fieldsData = arr;
				
			},
			handleChange(e){
				console.log('e',e)
				this.exportField = e.detail.value;
				console.log('this.datakey',this.exportField);
				
			},
			async exportFile(){
				uni.showLoading({
					title:"导出中",
				})
				console.log('export',this.selectIds)
				if(!this.exportField){
					uni.showToast({
						title:"请选择要导出的字段",
						icon:'none'
					})
					return;
				}
				const res = await this.$req({
					url: 'system/exportManage/wxExportExcel.do',
					data: {
						key:'DATAKEY',
						selectIds:this.selectIds,
						queryString:this.queryString,
						formDefine:this.type,
						exportField:this.exportField.join(',')
					}
				})
				uni.hideLoading()
				if(res.data.success){
					this.$util.openFile(res.data.attributes.fileUrl)
				} else {
					uni.showToast({
						title:"导出失败"
					})
				}
			},
			handleClose(){
				this.$emit('onClose')
			},
		},
		created(){
			this.getFields()
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		height: 80rpx;
		display: flex;
		border-bottom: 1px solid rgb(232,240,242);
		justify-content: space-between;
		align-items: center;
	}
	.btn-export{
		color: #0099cc;
		margin-left: 10px;
	}
	.box-export{
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 0 30rpx 30rpx 30rpx;
		z-index: 99999999;
		overflow: hidden;
		transition: all 0.3s;
		display: none;
		
	}
	.checkbox{
		display: flex;
		
		flex-wrap: wrap;
	}
	.checkbox-label{
		width: 33.3%;
		font-size: 24rpx;
		margin-top:20rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.export-btn-group{
		display: flex;
	}
</style>
